<template>
	<view>
		<view class="header">
			<text @click="back">返回</text>
			<input class="search" type="text" placeholder="关键字" placeholder-style="color:#D6D3CF" v-model="inputContent">
			<text @click="keySearch">搜索</text>
		</view>
		<view class="line"></view>
		<view class="searchContent">
			<view class="text">
				<text>历史搜索</text>
				<text class="iconfont icon-shanchu" @click="deleteBox"></text>
			</view>
			<view class="record">
				<button @click="searchBtn" :data-type="v" v-for="(v,i) in historyList">{{v}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http.js'
	import {useStore} from 'vuex'
	import {reactive,toRefs,onMounted} from 'vue'
	export default {
		setup(){
			const store=useStore();
			let data=reactive({
				inputContent:'',
				historyList:[],
				number:[],
				getData:()=>{
					http({
						url:'/System/search/get',
					}).then((res)=>{
						res.data.data.forEach((v, i) => {
							// console.log(v,i)
						    data.historyList.push(v.h_value);
						});
					})
				},
				keySearch:()=>{
					if(data.inputContent!=''){
						http({
								url:'/System/search/add',
								method:'post',
								data:{
									value:data.inputContent
								}
						}).then((res)=>{
							// console.log(data.inputContent)
							store.commit('lijuhua/setInput', data.inputContent)
							uni.navigateTo({
								url:'../search_results/search_results'
							})
						});
					}
				},
				back(){
					uni.navigateTo({
						url:'../announcement_notice/announcement_notice'
					})
				},
				deleteBox(){
					http({
						url:'/System/search/del'
					}).then((res)=>{
						data.historyList='';
					})
				},
				searchBtn(v){
					console.log(v.target.dataset.type)
					data.inputContent=v.target.dataset.type
					http({
							url:'/System/result/get',
							data:{
								title:data.inputContent
							}
					}).then((res)=>{
						// console.log(data.inputContent)
						store.commit('lijuhua/setInput', data.inputContent)
						uni.navigateTo({
							url:'../search_results/search_results'
						})
					});
				},
			})
			onMounted(()=>{
				data.getData();
			})
			
			return {...toRefs(data)}
		}
	}
</script>

<style scoped lang="scss">
	@import url('@/static/font/iconfont.css');
	.header {
		width: 710rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx 10rpx 20rpx;
		
		text {
			color: #3F96F1;
		}
		
		input {
			width: 460rpx;
			height: 50rpx;
			font-size: 28rpx;
			color: #8C8C8C;
			border-radius: 50rpx;
			border: 1px solid #E7E7E7;
			padding: 10rpx 30rpx;
			
		}
	}
	.line {
		height: 2rpx;
		background-color: #F7F7F7;
	}
	// .text text:last-child {
	// 	width: 100rpx;
	// 	height: 50rpx;
	// }
	.text {
		padding: 30rpx 20rpx 0 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.record {
		display: flex;
		// justify-content: flex-start;
		flex-wrap: wrap;
		align-content: flex-start;
		padding: 0 20rpx;
		
		button {
			border-radius: 50rpx;
			background-color: #F5F5F5;
			font-size: 28rpx;
			text-align: center;
			color: #686867;
			padding: 0 30rpx;
			margin: 10rpx;
		}
		button::after {
			border: none;
		}
	}
</style>
